<template>
  <div class="view-fill">
    <div
      v-if="!modifyInfo.visible && !assetApplicationDetailInfo.visible"
      class="app-container-flex"
    >
      <NewFullScreen
        v-model="showDialog"
        title="合同详情"
        :needOperateAffair="true"
        :operateAffairData="affairTableInfo"
        @returnBack="returnBack"
      >
        <template v-slot:full-button>
          <el-button v-if="canUpdate" @click="update">修改</el-button>
          <el-button v-if="canCheck" @click="check">审核</el-button>
          <el-button v-if="canReject" @click="reject">驳回</el-button>
        </template>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="infoList"> </basic-information>
          </div>
        </div>
        <div v-show="repairInfo.data.contractType == '1'" class="model-panel">
          <div class="model-panel-title">
            <p>维保信息</p>
          </div>
          <div class="model-panel-body">
            <!-- form -->
            <basic-information :info="repairInfo"> </basic-information>
          </div>
        </div>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>招标信息</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="biddingInfoList"> </basic-information>
          </div>
        </div>
        <div class="model-panel">
          <div class="model-panel-title">
            <Tooltip :text="'付款信息'"></Tooltip>
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <page-table
                :refresh="payDetailInfo.refresh"
                :init-curpage="payDetailInfo.initCurpage"
                v-model:data="payDetailInfo.data"
                :pager="false"
                :check-box="false"
                :tab-index="true"
                :field-list="payDetailInfo.fieldList"
              >
              </page-table>
            </div>
          </div>
        </div>
        <div v-show="infoList.data.contractType == '1'" class="model-panel">
          <div class="model-panel-title">
            <Tooltip :text="'验收标准'"></Tooltip>
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <page-table
                :refresh="acceptanceInfo.refresh"
                :init-curpage="acceptanceInfo.initCurpage"
                v-model:data="acceptanceInfo.data"
                :pager="false"
                :check-box="false"
                :tab-index="true"
                :field-list="acceptanceInfo.fieldList"
              >
              </page-table>
            </div>
          </div>
        </div>
        <div v-if="infoList.data.contractType == '1'" class="model-panel">
          <div class="model-panel-title">
            <Tooltip :text="$t('detailInfo')"></Tooltip>
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <page-table
                :refresh="tableInfo.refresh"
                :init-curpage="tableInfo.initCurpage"
                v-model:data="tableInfo.data"
                :pager="false"
                :check-box="false"
                :tab-index="true"
                :field-list="tableInfo.fieldList"
              >
                <template v-slot:col-assetApplicationNo="scope">
                  <span
                    class="slip-edit"
                    @click="
                      showAssetApplicationDetail(scope.row.assetApplicationId)
                    "
                    >{{ scope.row.assetApplicationNo }}</span
                  >
                </template>
              </page-table>
            </div>
          </div>
        </div>

        <div v-else class="model-panel">
          <div class="model-panel-title">
            <Tooltip :text="$t('detailInfo')"></Tooltip>
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <page-table
                :refresh="productTableInfo.refresh"
                :init-curpage="productTableInfo.initCurpage"
                v-model:data="productTableInfo.data"
                :pager="false"
                :check-box="false"
                :tab-index="true"
                :field-list="productTableInfo.fieldList"
              >
              </page-table>
            </div>
          </div>
        </div>

        <div class="model-panel">
          <div class="model-panel-title">
            <p>附件信息</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="fileUrlListInfoList">
              <template v-slot:basic-filePathList>
                <EleGallery
                  v-if="
                    fileUrlListInfoList.data.filePathList &&
                    fileUrlListInfoList.data.filePathList.length
                  "
                  :lazy="true"
                  :size="150"
                  :source="fileUrlListInfoList.data.filePathList"
                  title="合同附件"
                />
                <span v-else>-</span>
              </template>
            </basic-information>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <order-modify
      v-if="modifyInfo.visible"
      :id="modifyInfo.id"
      v-model:visible="modifyInfo.visible"
      :title="modifyInfo.title"
      @returnModify="returnModify"
    />
    <assetApplicationDetails
      v-if="assetApplicationDetailInfo.visible"
      :id="assetApplicationDetailInfo.id"
      v-model:visible="assetApplicationDetailInfo.visible"
      :title="assetApplicationDetailInfo.title"
    />
    <asset-card-detail
      v-if="assetDetailInfo.visible"
      :id="assetDetailInfo.id"
      v-model:visible="assetDetailInfo.visible"
      :title="assetDetailInfo.title"
    />
  </div>
</template>

<script setup name="pendCheckContractDetails">
import {
  getContractDetailCustomizeListAll,
  selectContractById,
  getContractPayDetailByOrderId,
  submitContract,
  checkContract,
  rejectContract,
  revokeContract,
  exportContractDetail,
  printContractDetail,
  getContractProductDetailCustomizeListAll,
} from '@/api/contract.js'
import { getCustomizeSetting } from '@/api/customize'
import { orderOpAffairAll } from '@/api/affair'
import { fatchTemplateByCode } from '@/api/base'
import EleGallery from '@/components/UploadImgNew/eleGallery'
import _ from 'lodash'

const { proxy } = getCurrentInstance()
const emit = defineEmits()

const OrderModify = defineAsyncComponent(() => import('./modify'))
const BasicInformation = defineAsyncComponent(() =>
  import('@/components/BasicInformation/index')
)
const PageTable = defineAsyncComponent(() =>
  import('@/components/PageTable/index')
)
const Tooltip = defineAsyncComponent(() => import('@/components/Tooltip/index'))
const assetApplicationDetails = defineAsyncComponent(() =>
  import('@/views/asset/assetManage/assetApplication/details')
)
const AssetCardDetail = defineAsyncComponent(() =>
  import('@/views/asset/assetManage/assetCard/details')
)

const props = defineProps(['visible', 'id'])

const infoList = reactive({
  data: {},
  fieldList: [
    { label: '合同编码', value: 'orderNo', type: 'text' },
    { label: '合同名称', value: 'contractName', type: 'text' },
    { label: '合同类型', value: 'contractTypeValue', type: 'text' },
    { label: '公司名称', value: 'company', type: 'text' },
    { label: '开票方式', value: 'invoiceTypeValue', type: 'text' },
    { label: '金额', value: 'amount', type: 'text' },
    { label: '签订人', value: 'signUserName', type: 'text' },
    { label: '供应商', value: 'supplierName', type: 'text' },
    { label: '签订日期', value: 'signDate', type: 'text' },
    {
      label: '验收日期',
      value: 'acceptanceDate',
      type: 'text',
      show: true,
    },
    {
      label: '要求到货日期',
      value: 'arrivalDate',
      type: 'text',
      show: true,
    },
    { label: '合同开始日期', value: 'contractStartDate', type: 'text' },
    { label: '合同结束日期', value: 'contractEndDate', type: 'text' },
    { label: '状态', value: 'statusValue', type: 'text' },
    {
      label: '总金额限制',
      value: 'sumAmountLimitValue',
      type: 'text',
      show: false,
    },
    {
      label: '产品数量限制',
      value: 'qtyLimitValue',
      type: 'text',
      show: false,
    },
    { label: '备注', value: 'remark', type: 'popover' },
  ],
})
const fileUrlListInfoList = reactive({
  data: {},
  fieldList: [{ label: '合同附件', value: 'filePathList', type: 'slot' }],
})
const repairInfo = reactive({
  data: {},
  fieldList: [
    {
      label: '免费维保服务(年)',
      value: 'maintenanceYears',
      type: 'text',
    },
    {
      label: '维保起算日期',
      value: 'maintenanceStartDate',
      type: 'text',
    },
    {
      label: '维保到期日期',
      value: 'maintenanceEndDate',
      type: 'text',
    },
  ],
})
const biddingInfoList = reactive({
  data: {},
  fieldList: [
    { label: '招标日期', value: 'biddingDate', type: 'text' },
    { label: '招标文件编号', value: 'biddingFileNo', type: 'text' },
    { label: '招标方式', value: 'biddingTypeValue', type: 'text' },
    { label: '中标日期', value: 'winBiddingDate', type: 'text' },
    { label: '中标文件编号', value: 'winBiddingFileNo', type: 'text' },
    {
      label: '中标供应商',
      value: 'winBiddingSupplierName',
      type: 'text',
    },
  ],
})
const payDetailInfo = reactive({
  data: [],
  fieldList: [
    { label: '付款期', value: 'payPeriod' },
    { label: '付款比例(%)', value: 'payRate' },
    { label: '金额', value: 'payAmount' },
    { label: '付款类型', value: 'payTypeValue' },
    { label: '付款条件', value: 'payConditionValue' },
    { label: '付款日期', value: 'payDate' },
    { label: '付款状态', value: 'payStatusValue' },
    { label: '支付方式', value: 'payWayValue' },
    { label: '备注', value: 'operateTypeValue' },
  ],
})
const acceptanceInfo = reactive({
  data: [],
  fieldList: [
    { label: '验收项目', value: 'acceptanceItem' },
    { label: '验收标准/要求', value: 'acceptanceCriterion' },
    { label: '备注', value: 'remark' },
  ],
})
// 过滤相关配置
const filterInfo = reactive({
  query: {
    customizeUserVO: {},
    queryMap: {
      orderId: {
        queryType: 'EQUALS',
        queryCategory: 'AND',
        value: props.id,
      },
    },
    queryParams: {},
  },
})
// 过滤相关配置
const productFilterInfo = reactive({
  query: {
    customizeUserVO: {},
    queryMap: {
      orderId: {
        queryType: 'EQUALS',
        queryCategory: 'AND',
        value: props.id,
      },
    },
    queryParams: {},
  },
})
const modifyInfo = reactive({
  id: '',
  visible: false,
  title: '',
})
const assetApplicationDetailInfo = reactive({
  id: '',
  visible: false,
  title: '资产申购论证详情',
})
// 表格相关
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  data: [],
  fieldList: [],
})
// 表格相关
const productTableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  data: [],
  fieldList: [],
})
const assetDetailInfo = reactive({
  visible: false,
  id: '',
  title: '资产详情',
})
const purchDetailInfo = reactive({
  visible: false,
  orderId: '',
})
const affairTableInfo = reactive({
  api: orderOpAffairAll,
  query: {
    orderType: 61,
    orderId: props.id,
    sort: 'operate_time desc',
  },
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    proxy.$emit('update:visible', newValue) // 更新父组件visible
  },
})

const canUpdate = computed(() => {
  return (
    proxy.$permission('pendCheckContract:update') && infoList.data.status === 2
  )
})
const canReject = computed(() => {
  return (
    proxy.$permission('pendCheckContract:reject') && infoList.data.status === 2
  )
})
const canCheck = computed(() => {
  return (
    proxy.$permission('pendCheckContract:check') && infoList.data.status === 2
  )
})

watch(
  () => props.visible,
  (value) => {
    showDialog.value = value
  },
  {
    immediate: true,
  }
)

watch(
  () => props.id,
  (newVal) => {
    filterInfo.query.queryMap.orderId.value = newVal
    productFilterInfo.query.queryMap.orderId.value = newVal
    affairTableInfo.query.orderId = newVal
    getCustomize()
  },
  {
    immediate: true,
    deep: true,
  }
)

tableInfo.fieldList = Object.values({
  ...proxy.$fn.deepClone(proxy.$fieldfList.FieldList),
  assetApplicationNo: {
    label: '资产申购论证单号',
    value: 'assetApplicationNo',
    type: 'slot',
    show: false,
    hidden: true,
  },
})
productTableInfo.fieldList = Object.values({
  ...proxy.$fn.deepClone(proxy.$fieldfList.FieldList),
})
getCustomize()

function showAssetDetail(row) {
  assetDetailInfo.id = row.assetId
  assetDetailInfo.visible = true
}
function showAssetApplicationDetail(id) {
  assetApplicationDetailInfo.id = id
  assetApplicationDetailInfo.visible = true
}
//提交
function submit() {
  submitContract([props.id]).then((resp) => {
    if (resp && resp.success) {
      getMain()
    }
  })
}
//驳回
function reject() {
  rejectContract([props.id]).then((resp) => {
    if (resp && resp.success) {
      getMain()
    }
  })
}
//审核
function check() {
  checkContract([props.id]).then((resp) => {
    if (resp && resp.success) {
      getMain()
    }
  })
}
//撤回
function revoke() {
  revokeContract([props.id]).then((resp) => {
    if (resp && resp.success) {
      getMain()
    }
  })
}
function returnBack() {
  proxy.$emit('returnBack', false)
}
function returnModify() {
  getMain()
}
function getMain() {
  selectContractById(props.id).then((resp) => {
    if (resp && resp.success) {
      const acceptanceDate = _.find(infoList.fieldList, [
        'value',
        'acceptanceDate',
      ])
      const arrivalDate = _.find(infoList.fieldList, ['value', 'arrivalDate'])
      const sumAmountLimitValue = _.find(infoList.fieldList, [
        'value',
        'sumAmountLimitValue',
      ])
      const qtyLimitValue = _.find(infoList.fieldList, [
        'value',
        'qtyLimitValue',
      ])
      if (resp.data.contractType === 2) {
        acceptanceDate.show = false
        arrivalDate.show = false
        sumAmountLimitValue.show = true
        qtyLimitValue.show = true
      }
      infoList.data = resp.data
      repairInfo.data = resp.data
      biddingInfoList.data = resp.data
      acceptanceInfo.data = resp.data.acceptanceDetailList
      fileUrlListInfoList['data'] = resp.data
      getList()
    }
  })
}
function getList() {
  let params = {
    orderId: props.id,
  }
  if (infoList.data.contractType == '1') {
    showFieldListItem(true, 'businessType')
    showFieldListItem(true, 'assetBelongDeptName')
    getContractDetailCustomizeListAll(filterInfo.query).then((resp) => {
      if (resp && resp.success) {
        tableInfo.data = resp.data
      }
    })
    // getContractAcceptanceDetailByOrderId(params).then((resp) => {
    //   if (resp && resp.success) {
    //     acceptanceInfo.data = resp.data;
    //   }
    // })
  } else {
    showFieldListItem(false, 'businessType')
    showFieldListItem(false, 'assetBelongDeptName')
    getContractProductDetailCustomizeListAll(productFilterInfo.query).then(
      (res) => {
        if (res && res.success) {
          productTableInfo.data = res.data
        }
      }
    )
  }
  getContractPayDetailByOrderId(params).then((resp) => {
    if (resp && resp.success) {
      payDetailInfo.data = resp.data
    }
  })
}
function update() {
  modifyInfo.id = props.id
  modifyInfo.title = '修改'
  modifyInfo.visible = true
}
function showFieldListItem(show, nameValue) {
  let fieldList = infoList.fieldList
  fieldList.map((item) => {
    if (item.value === nameValue) {
      item.show = show
    }
  })
}
function getCustomize() {
  let param = {
    tableKey:
      'contractDeviceDetail-com.slip.spd.entity.vo.contract.ContractDetailVO',
  }
  getCustomizeSetting(param).then((res) => {
    if (res && res.success) {
      let data = res.data
      filterInfo.query.customizeUserVO = data
      let obj = proxy.$fn.setFieldList(tableInfo.fieldList, data.detail, true)
      tableInfo.fieldList = obj.fieldList
      let productParam = {
        tableKey:
          'contractProductDetail-com.slip.spd.entity.vo.contract.ContractProductDetailVO',
      }
      getCustomizeSetting(productParam).then((res) => {
        if (res && res.success) {
          let data = res.data
          productFilterInfo.query.customizeUserVO = data
          let productObj = proxy.$fn.setFieldList(
            productTableInfo.fieldList,
            data.detail,
            true
          )
          productTableInfo.fieldList = productObj.fieldList
        }
        getMain()
      })
    }
  })
}
</script>

<style scoped></style>
